<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>首页</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/home-page.css" />
		<link rel="stylesheet" href="css/footer.css" />
	</head>

	<body>
		<div>
			<div class="head-one row">
				<div onclick="location.href='./search.html'">
					<div class="sousuo">
						<img src="img/sousuo.png" alt="">
						<span>搜索你感兴趣的内容</span>
					</div>
				</div>
				<div onclick="location.href='./message-center.html'">
					<div class="tongzhi">
						<img src="img/tongzhi.png" alt="">
					</div>
				</div>
			</div>
			<div class="middle">

				<!--<div class="big-box">
					<div class="big-one row">
						<div onclick="location.href='./others-homepage.html'">
							<div class="big-two">
								<img class="big-three" src="img/pingguo.png" alt="">
							</div>
						</div>
						<div onclick="location.href='./others-homepage.html'">
							<span class="pet-name">Apple发布</span>
						</div>
						<span class="pet-names">3分钟前</span>
					</div>
					<div class="character">
						<div onclick="location.href='./advertising-details.html'">
							<p>2018年09月15日，苹果公司推出经过全新设计的MacBook、MacBook Pro系列笔记本电脑和新产品Apple LEDCinema Display显示器。难道就是南非测定覅偶基色噢覅偶</p>
						</div>
					</div>
					<div class="picture">
						<img src="img/500088528.png" alt="">
					</div>
					<div class="art">
						<span class="one">100</span><span class="two">个红包正在进行</span>
						<img class="three" src="img/fenxiang.png" alt="">
					</div>
				</div>
				<div class="big-box">
					<div class="big-one row">
						<div onclick="location.href='./others-homepage.html'">
							<div class="big-two">
								<img class="big-three" src="img/mi.png" alt="">
							</div>
						</div>
						<div onclick="location.href='./others-homepage.html'">
							<span class="pet-name">小米科技</span>
						</div>
						<span class="pet-names">3分钟前</span>
					</div>
					<div class="character">
						<div onclick="location.href='./advertising-details.html'">
							<p>2018年09月15日，苹果公司推出经过全新设计的MacBook、MacBook Pro系列笔记本电脑和新产品Apple LEDCinema Display显示器。难道就是南非测定覅偶基色噢覅偶</p>
						</div>
					</div>
					<div class="big-picture row">
						<div class="pictures">
							<img src="img/500413215.png" alt="">
						</div>
						<div class="pictures">
							<img src="img/501071324.png" alt="">
						</div>
						<div class="pictures">
							<img src="img/501072207.png" alt="">
						</div>
					</div>
					<div class="art">
						<span class="one">100</span><span class="two">个红包正在进行</span>
						<img class="three" src="img/fenxiang.png" alt="">
					</div>
				</div>-->

			</div>
			<div class="footer">
				 
				<ul class="flex" id="bottom">
					<li class="footer-one">
						<a href="">
							<img src="img/shouye1.png" alt="" />
							<i> 首页</i>
						</a>
					</li>
					<li class="footer-five">
						<a href="publish.html">
							<img src="img/fabu.png" alt="" />
							<i>发布</i>
						</a>
					</li>
					<li class="footer-one">
						<a href="personage.html">
							<img src="img/wode1.png" alt="" />
							<i>我的</i>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/all.js"></script>
		<script>
			//保存用来判断是不是第一次来
			window.localStorage.HaveBeenTo = "这个贱人来过";
			
			
			
			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.middle', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			//ajax请求
			function ajaxLoad(_loadIndex) {
				//更新发向服务器的数据，添加页数key值
				$.ajax({
					type: "post",
					url: Url + "/browseTask/findPageBrowseTask",
					xhrFields: {
						withCredentials: true
					},
					data: {
						"page": _loadIndex,
						"Rows": 4
					},
					success: ((data) => {
						_loadState = 0;
						console.log(data);
						let html = "";
						if(data == ""){
							_loadState = 1;
							 
							$(".nowLoad").text("我也是有底线的。。。");
						}
						for(let i = 0; i < data.length; i++) {
							html += `		
									<div class="big-box">
										<div class="big-one row">
											<a href="others-homepage.html?userName=${data[i].userName}">
												<div class="row">
													<div class="big-two">
														<img class="big-three" src="${data[i].portrait}" alt="">
													</div>
													<span class="pet-name">${data[i].companyName}发布</span>
												</div>
											</a>
										 
											<span class="pet-names">3分钟前</span>
										</div>
										<a href="advertising-details.html?id=${data[i].browseTask.browseTaskId}">
											<div class="character">
												<p>${data[i].browseTask.title}</p>	 
											</div>
											<div class="picture">
												<img src="${data[i].browseTask.picture}" alt="">
											</div>
										</a>
										
										<div class="art">
											<span class="one">${data[i].browseTask.envelopesNum}</span><span class="two">个红包正在进行</span>
											<img class="three" src="img/fenxiang.png" alt="">
										</div>
									</div>
										
									`
							$(".middle").html(html);

						}

					}),
					error: ((err) => {
						console.log(err);
					})
				});

			}

			ajaxLoad(_loadIndex);
			
			
			
			//放在主页面  点击两次退出APP 点击一次退出
document.addEventListener('plusready', function(a) {
    var first = null;
    plus.key.addEventListener('backbutton', function() {
                    //首次按键，提示‘再按一次退出应用’
                    if (!first) {
                        first = new Date().getTime();
                        
                        //document.write('再按一次退出应用');//用自定义toast提示最好
                        $("body").append('<div class="tishi">双击退出</div>');
				            $(".tishi").css({
				     				"width": "2.7rem",
								    "display": "flex",
								    "position": "absolute",
								    "font-size": ".24rem",
								    "background": "rgba(63,63,63,0.8)",
								    "height": ".5rem",
								    "top": "83vh",
								    "left": "33vw",
								    "border-radius": "32px",
								    "color": "#ffffff",
								    "padding": ".08rem 0px 0px .9rem",
								    "display":"flex"
							});
                        
                        
	                        setTimeout(function() {
	                            first = null;
	                           	$(".tishi").fadeOut(2000,function(){
					            	$(".tishi").remove();
					            });
	                        }, 1000);
                    } else {
                        if (new Date().getTime() - first < 1000) {
                            plus.runtime.quit();
                        }
                    }
                }, false);
});
        
 
		</script>

	</body>

</html>